<template>
  <div class="modal" v-if="visible">
    <div class="modal-content">
      <div class="modal-header">
        <h3>批量导入考生</h3>
        <button class="modal-close" @click="close">
          <i class="icon-close"></i>
        </button>
      </div>
      <div class="modal-body">
        <div class="import-instructions">
          <h4>导入说明</h4>
          <ol>
            <li>下载模板文件，按照格式填写考生信息</li>
            <li>支持Excel文件(.xlsx, .xls)</li>
            <li>每次最多导入1000条记录</li>
            <li>密码留空将自动生成随机密码</li>
          </ol>
        </div>

        <div class="form-group">
          <button class="btn btn-secondary" @click="downloadTemplate">
            <i class="icon-download"></i> 下载模板
          </button>
        </div>

        <div class="form-group">
          <label>选择文件</label>
          <div class="file-upload">
            <input
                type="file"
                id="importFile"
                accept=".xlsx, .xls"
                @change="handleFileChange"
            >
            <label for="importFile" class="upload-label">
              <i class="icon-upload"></i>
              <span v-if="!file">点击选择文件</span>
              <span v-else class="file-name">{{ file.name }}</span>
            </label>
          </div>
        </div>

        <div class="progress-container" v-if="progress > 0">
          <div class="progress-info">
            <span>导入进度: {{ progress }}%</span>
            <span v-if="progress === 100" class="success-text">
              <i class="icon-success"></i> 导入成功
            </span>
          </div>
          <div class="progress-bar">
            <div
                class="progress-fill"
                :style="{ width: `${progress}%` }"
            ></div>
          </div>
        </div>

        <div class="form-actions">
          <button
              type="button"
              class="btn btn-cancel"
              @click="close"
          >
            取消
          </button>
          <button
              type="button"
              class="btn btn-submit"
              @click="startImport"
              :disabled="!file || progress > 0"
          >
            <i class="icon-import"></i> 开始导入
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImportStudentModal',
  props: {
    visible: Boolean
  },
  data() {
    return {
      file: null,
      progress: 0,
      importInterval: null
    }
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0]
      this.progress = 0
    },
    downloadTemplate() {
      // 实际项目中替换为真实的模板下载链接
      const link = document.createElement('a')
      link.href = '/templates/student_import_template.xlsx'
      link.download = '学生导入模板.xlsx'
      link.click()
      this.$emit('template-downloaded')
    },
    startImport() {
      if (!this.file) return

      // 模拟导入过程
      this.progress = 0
      this.importInterval = setInterval(() => {
        this.progress += 10
        if (this.progress >= 100) {
          clearInterval(this.importInterval)
          this.$emit('import-complete')
          setTimeout(() => {
            this.close()
          }, 1500)
        }
      }, 300)

      // 实际项目中替换为真实的API调用
      // const formData = new FormData()
      // formData.append('file', this.file)
      // axios.post('/api/students/import', formData, {
      //   onUploadProgress: progressEvent => {
      //     this.progress = Math.round(
      //       (progressEvent.loaded * 100) / progressEvent.total
      //     )
      //   }
      // }).then(() => {
      //   this.$emit('import-complete')
      // }).catch(error => {
      //   console.error('导入失败:', error)
      // })
    },
    close() {
      this.file = null
      this.progress = 0
      if (this.importInterval) {
        clearInterval(this.importInterval)
      }
      this.$emit('close')
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/styles/variables.less";

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;

  .modal-content {
    background: white;
    border-radius: @radius-md;
    width: 100%;
    max-width: 500px;
    box-shadow: @shadow-lg;
    overflow: hidden;

    .modal-header {
      padding: 1.25rem 1.5rem;
      border-bottom: 1px solid @gray-200;
      display: flex;
      justify-content: space-between;
      align-items: center;

      h3 {
        margin: 0;
        font-size: 1.25rem;
        color: @gray-800;
      }

      .modal-close {
        background: none;
        border: none;
        font-size: 1.25rem;
        cursor: pointer;
        color: @gray-500;
        transition: @transition;

        &:hover {
          color: @gray-700;
        }
      }
    }

    .modal-body {
      padding: 1.5rem;

      .import-instructions {
        background: @gray-50;
        padding: 1rem;
        border-radius: @radius-sm;
        margin-bottom: 1.5rem;

        h4 {
          margin-top: 0;
          margin-bottom: 0.75rem;
          color: @gray-700;
          font-size: 1rem;
        }

        ol {
          margin: 0;
          padding-left: 1.25rem;
          color: @gray-600;

          li {
            margin-bottom: 0.5rem;
            font-size: 0.875rem;

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }

      .file-upload {
        input[type="file"] {
          display: none;
        }

        .upload-label {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 1rem;
          border: 2px dashed @gray-300;
          border-radius: @radius-sm;
          background: white;
          cursor: pointer;
          transition: @transition;

          &:hover {
            border-color: @primary;
            background: @primary-lighter;
          }

          i {
            margin-right: 0.5rem;
            color: @gray-500;
          }

          .file-name {
            color: @gray-700;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 300px;
          }
        }
      }

      .progress-container {
        margin: 1.5rem 0;

        .progress-info {
          display: flex;
          justify-content: space-between;
          margin-bottom: 0.5rem;
          font-size: 0.875rem;
          color: @gray-600;

          .success-text {
            color: @success;
            font-weight: 500;
          }
        }

        .progress-bar {
          height: 8px;
          background: @gray-200;
          border-radius: 4px;
          overflow: hidden;

          .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, @primary, @secondary);
            border-radius: 4px;
            transition: width 0.3s ease;
          }
        }
      }

      .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        margin-top: 1.5rem;
      }
    }
  }
}

.btn {
  padding: 0.75rem 1.25rem;
  border-radius: @radius-md;
  font-weight: 500;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: @transition;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;

  &.btn-secondary {
    background: white;
    color: @primary;
    border: 1px solid @primary;

    &:hover {
      background: @primary-lighter;
    }
  }

  &.btn-cancel {
    background: white;
    color: @gray-600;
    border: 1px solid @gray-300;

    &:hover {
      background: @gray-100;
    }
  }

  &.btn-submit {
    background: @primary;
    color: white;

    &:hover {
      background: darken(@primary, 5%);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }
}

.icon-close,
.icon-download,
.icon-upload,
.icon-import,
.icon-success {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.icon-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12' /%3E%3C/svg%3E");
}

.icon-download {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /%3E%3C/svg%3E");
}

.icon-upload {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12' /%3E%3C/svg%3E");
}

.icon-import {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4' /%3E%3C/svg%3E");
}

.icon-success {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7' /%3E%3C/svg%3E");
}
</style>